<template>
  <div style="padding: 20rpx">
    <div class="form-wrap">
      <form
        bindsubmit="onSubmit">
        <mt-form
          :value="model"
          ref="form">
          <mt-form-item prop="a">
            <div class="mt-field mt-field--row a-input a-m-b-20">
              <mt-input :s-model="model.a"></mt-input>
            </div>
          </mt-form-item>
          <mt-form-item prop="c">
            <div class="mt-field mt-field--row a-input a-m-b-20">
              <mt-input :s-model="model.c"></mt-input>
            </div>
          </mt-form-item>
          <mt-form-item prop="b">
            <div class="mt-field mt-field--row a-select a-m-b-20">
              <mt-select
                columns="{{columns}}"
                :s-model="model.b"
              >
              </mt-select>
            </div>
          </mt-form-item>
          <mt-form-item prop="d">
            <div class="mt-field mt-field--row a-textarea a-m-b-20"
              style="height: auto;"
            >
              <mt-textarea :s-model="model.d"></mt-textarea>
            </div>
          </mt-form-item>
          <mt-form-item prop="e">
            <div class="mt-field mt-field--row a-switch a-m-b-20">
              <mt-switch
                :s-model="model.e"
                active-value="1"
                inactive-value="0"
              ></mt-switch>
            </div>
          </mt-form-item>
          <mt-form-item prop="f">
            <div class="mt-field mt-field--row a-radio-group a-m-b-20">
              <mt-radio-group
                :s-model="model.f"
                :items="radioItems"
              ></mt-radio-group>
            </div>
          </mt-form-item>
          <mt-form-item prop="g">
            <div class="mt-field mt-field--row a-checkbox-group a-m-b-20">
              <mt-checkbox-group
                :s-model="model.g"
                :items="checkboxItems"
              ></mt-checkbox-group>
            </div>
          </mt-form-item>
          <button
            form-type="submit"
          >submit</button>
        </mt-form>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        model: {
          a: '',
          b: [],
          c: '',
          d: '',
          e: '',
          f: '',
          g: '',
        },
        propB: '',
      }
    },
    attached() {
      this.setData({
        propB: 'propB',
        model: {},
        columns: [
          { label: '杭州', value: 'c01' },
          { label: '宁波', value: 'c02' },
          { label: '温州', value: 'c03' }
        ],
        radioItems: [
          { label: 'radio1', value: 'r01' },
          { label: 'radio2', value: 'r02' },
        ],
        checkboxItems: [
          { label: 'checkbox1', value: 'c01' },
          { label: 'checkbox2', value: 'c02' },
        ]
      })

      setTimeout(() => {
        this.setData({
          model: {
            a: '2',
            b: 'c02',
            c: '',
            d: '',
            e: '1',
            f: '',
            g: '',
          }
        })
      }, 1000)

      this.$staticRefs.form.setDescriptor(
        {
          a: {
            type: "string",
            required: true,
            validator: (rule, value) => value === 'muji',
          },
          c(rule, value, callback, source, options) {
            var errors = [];
            if(!/^[a-z0-9]+$/.test(value)) {
              errors.push(
                new Error(`${rule.field} must be lowercase alphanumeric characters`)
              );
            }
            return errors;
          }
        }
      )
    },
    methods: {
      onSubmit(e) {
        let v = this.$staticRefs.form.getValue()

        this.$staticRefs.form.validate((errors, fields) => {
          console.log(fields)
          if(errors) {
            console.error(errors)
          }
          console.log(v)
        })
      }
    }
  }
</script>
